<template>
	<view v-show="pageShow">
		<view class="uni-form-item">
			<view class="title">货品代码</view>
			<view class="uni-input-container">
				<view class="uni-input-view">
					<input class="uni-input" v-model="goodsCode" :focus="focus" @input="handleClearGoods" @confirm="handleConfirmGoods" placeholder="请扫描货品代码" />
					<image src="/static/scan.png" class="scan" @click="handleScanGoods" />
				</view>
				<image src="/static/search.png" class="search" @click="handleConfirmGoods" />
			</view>
		</view>
		<view class="list-card" style="margin-top: 20rpx;">
			<uni-card :title="'入库单号：' + order.billNo">
				<view class="item">
					<view class="item-content">
						<label>状态：</label>
						<text class="status" :class="{warning: order.qualityState < '500'}">{{order.qualityStateName || '-'}}</text>
					</view>
					<view class="item-content">
						<label>外部单号：</label>
						<text>{{order.outOrderNo || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view>
						<label>质检时间：</label>
						<text>{{order.tbInBillProcess && order.tbInBillProcess.qualityTime ? order.tbInBillProcess.qualityTime : '-'}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<form @submit="formSubmit" v-if="goods">
			<view class="list-card" style="margin-top: 20rpx; margin-bottom: -20rpx;">
				<uni-card title="质检货品">
					<view class="item">
						<view class="item-content">
							<label>总送检量：</label>
							<text>{{parseInt(goods.noQuantityCount || 0) + parseInt(goods.expectQuantity || 0)}}</text>
						</view>
						<view class="item-content">
							<label>待检量：</label>
							<text>{{goods.expectQuantity || 0}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品代码：</label>
							<text>{{goods.goodsCode || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{goods.goodsName || '-'}}</text>
						</view>
					</view>
				</uni-card>
			</view>
			<view class="uni-form-item">
				<view class="title">实检数</view>
				<input class="uni-input border" type="number" name="realQualityCount" v-model="realQualityCount" placeholder="请输入实检数" />
			</view>
			<view class="uni-form-item">
				<view class="title">不合格数</view>
				<input class="uni-input border" type="number" name="noGoodCount" v-model="noGoodCount" placeholder="请输入不合格数" />
			</view>
			<view class="uni-form-item">
				<view class="title">质检结果</view>
				<radio-group @change="e => qualityResults = e.detail.value" style="display: flex;">
					<label class="uni-list-cell-pd" style="display: flex;" v-for="v in qualityResultsList" :key="v.value">
						<radio :value="v.value" :checked="v.value === qualityResults" />
						<view>{{v.label}}</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-btn-v">
				<button type="primary" form-type="submit">质检</button>
			</view>
		</form>
		<view class="list-card" style="margin-top: 20rpx;" v-if="result">
			<uni-card>
				<view style="display: flex; align-items: center; border-bottom: 2rpx solid #e5e5e5; margin: -10rpx -30rpx 24rpx -30rpx; padding: 0 30rpx 10rpx 30rpx;">
					<view style="font-size: 28rpx;">质检结果：</view>
					<view :style="{color: result.qualityResults === '1' ? 'green' : 'red'}">
						{{qualityResultsList.find(v => v.value === result.qualityResults).label}}
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>箱号：</label>
						<text>{{result.boxCode || '-'}}</text>
					</view>
					<view class="item-content">
						<label>货品代码：</label>
						<text>{{result.goodsCode || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>合格数：</label>
						<text>{{result.goodCount || 0}}</text>
					</view>
					<view class="item-content">
						<label>不合格数：</label>
						<text>{{result.noGoodCount || 0}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<uni-popup ref="goodsSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 3;">货品代码</view>
						<view class="td" style="flex: 3;">货品名称</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in goodsList" :key="item.id" @click="handleSelectGoods(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="goods && goods.id === item.id" />
							</view>
							<view class="td" style="flex: 3;">{{item.goodsCode || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.goodsName || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				pageShow: false,
				focus: true,
				qualityOrderId: null,
				order: {},
				goodsCode: null,
				goodsList: [],
				goods: null,
				realQualityCount: null,
				noGoodCount: 0,
				qualityResults: '1',
				qualityResultsList: [],
				result: null
			}
		},
		onLoad(e) {
			this.qualityOrderId = e.id;
			uni.showLoading({
				title: '加载中'
			});
			this.getQualityResultsDictList();
			this.getDetail(() => {
				if (this.order.qualityList.length === 1) {
					const _goods = this.order.qualityList[0];
					this.handleSelectGoods(_goods);
				}
				this.pageShow = true;
				uni.hideLoading();
			}, () => uni.hideLoading());
		},
		methods: {
			getQualityResultsDictList() {
				this.$api.common.dictListByLabel('quality_results').then(res => {
					this.qualityResultsList = res.map(v => {
						return {
							value: v.value,
							label: v.label
						}
					});
				});
			},
			getDetail(successCallback, errorCallback) {
				this.$api.quality.queryQualityById(this.qualityOrderId).then(res => {
					this.order = res;
					Object.assign(this.order, {
						qualityList: this.order.qualityList.filter(v => !v.realQualityCount)
					});
					successCallback && successCallback instanceof Function && successCallback();
				}, () => errorCallback && errorCallback instanceof Function && errorCallback());
			},
			handleClearGoods() {
				this.goodsList = [];
				this.goods = null;
				this.realQualityCount = 0;
				this.noGoodCount = 0;
				this.qualityResults = '1';
			},
			handleScanGoods() {
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirmGoods();
				});
			},
			handleConfirmGoods() {
				this.handleClearGoods();
				this.result = null;
				if (this.goodsCode) {
					this.$api.goods.listScan({
						ownerId: this.order.ownerId,
						code: this.goodsCode
					}).then(res => {
						const _goodsCodeList = res.data.map(v => v.code.toLowerCase());
						this.goodsList = this.order.qualityList.filter(v => _goodsCodeList.includes(v.goodsCode.toLowerCase()));
						this.handleConfirmGoodsCallback();
					});
				} else {
					this.goodsList = [...this.order.qualityList];
					this.handleConfirmGoodsCallback();
				}
			},
			handleConfirmGoodsCallback() {
				if (!this.goodsList.length) {
					uni.showToast({
						title: '未匹配到待质检货品',
						icon: 'none'
					});
					return;
				}
				this.focus = false;
				if (this.goodsList.length === 1) {
					const _goods = this.goodsList[0];
					this.handleSelectGoods(_goods);
				} else {
					this.$refs.goodsSelect.open();
				}
			},
			handleSelectGoods(goods) {
				this.focus = false;
				this.goods = goods;
				this.goodsCode = this.goods.goodsCode;
				this.realQualityCount = this.goods.expectQuantity || 0;
				this.noGoodCount = 0;
				this.qualityResults = '1';
				setTimeout(() => {
					this.$refs.goodsSelect.close();
					this.goodsList = [];
				}, 100);
			},
			formSubmit(e) {
				const _params = Object.assign({}, e.detail.value);
				const _realQualityCount = parseInt(_params.realQualityCount);
				const _noGoodCount = parseInt(_params.noGoodCount || 0);
				const _expectQuantity = parseInt(this.goods.expectQuantity);
				if (!_realQualityCount) {
					return uni.showToast({
						title: '请输入实检数',
						icon: 'none'
					})
				}
				if (_realQualityCount > _expectQuantity) {
					return uni.showToast({
						title: '实检数不能大于待检数',
						icon: 'none'
					})
				}
				if (_noGoodCount && _noGoodCount > _realQualityCount) {
					return uni.showToast({
						title: '不合格数不能大于实检数',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '质检中'
				});
				const params = Object.assign({}, _params, {
					qualityOrderId: this.qualityOrderId,
					goodsId: this.goods.goodsId,
					goodCount: _realQualityCount - _noGoodCount,
					qualityResults: this.qualityResults
				});
				this.$api.quality.updateQualityCargo(params).then(() => {
					global.$refresh = true;
					uni.hideLoading();
					uni.showToast({
						title: '质检成功',
						icon: 'success'
					});
					this.result = {
						boxCode: this.goods.boxCode,
						goodsCode: this.goods.goodsCode,
						goodCount: params.goodCount,
						noGoodCount: params.noGoodCount,
						qualityResults: params.qualityResults
					};
					this.goodsCode = null;
					this.goodsList = [];
					this.goods = null;
					this.realQualityCount = 0;
					this.noGoodCount = 0;
					this.qualityResults = '1';
					this.getDetail(() => {
						if (this.order.qualityState >= '500') {
							setTimeout(() => {
								uni.showModal({
									title: '温馨提示',
									content: '已质检完成，是否返回首页',
									cancelText: '否',
									confirmText: '是',
									success: res => {
										res.confirm && uni.navigateBack();
									}
								});
							}, 1000);
						}
					});
				}, () => uni.hideLoading());
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
